<script setup lang="ts">
import { useRouter } from "vue-router";
import { querymenus } from "../request/api";
import { useMainStore } from "../store";
import { storeToRefs } from "pinia";

import {
  getCurrentInstance,
  defineComponent,
  reactive,
  ref,
  watch,
  onMounted,
} from "vue";
//实例化路由对象
const router = useRouter();

//从store里取出菜单数据
const mainStore = useMainStore();
const {
  menus: res1,
  activrmenus,
  toptitle,
  activeName,
  leftmenus,
  activerindex,
  breadcrumb,
  headertabs,
  activetab,
} = storeToRefs(mainStore);
var res = res1.value;

//获取缓存路由
const { cacheroute } = storeToRefs(mainStore)

//获取到菜单数据
const menus = reactive({
  data: res,
});

//tabs选项卡被点击的方法
const handleClick = (tab: any, event: Event) => {
  // console.log(tab.props.name)
  //点击tab菜单栏头顶的文字变化
  toptitle.value = tab.props.name;

  //点击tab右侧菜单变化
  res.forEach((element) => {
    if (element.menu_name == tab.props.name) {
      mainStore.leftmenus = element.child;
      // mainStore.activerindex = mainStore.leftmenus[0].menu_path

      return;
    }
  });

  console.log(mainStore.leftmenus[0]);

  //点击左侧tab自动跳转到菜单第一个选项
  if (!mainStore.leftmenus[0].child) {
    router.push("/" + mainStore.leftmenus[0].menu_path);
  } else {
    router.push("/" + mainStore.leftmenus[0].child[0].menu_path);
  }
};

var headerbtnicon = ref("#icon-zhedie1");
var headericonfalg = ref(true);
//是否缩进菜单
var showmenu = ref(true);

//头部点击缩进箭头
const btnindent = () => {
  if (headericonfalg.value) {
    console.log(headericonfalg.value);
    headerbtnicon.value = "#icon-zhedie2";
    headericonfalg.value = false;
    showmenu.value = false;
  } else {
    headerbtnicon.value = "#icon-zhedie1";
    headericonfalg.value = true;
    showmenu.value = true;
  }
};

//退出登录的方法
const quitbtn = () => {
  window.sessionStorage.clear();
  window.location.href = "/login";
};

//菜单被点击的时候触发的方法
const selectmenu = (index) => {
  // mainStore.activerindex = index
  router.push("/" + index);
};

//头部tab被点击后的事件
const tabsclick = (tab) => {
  router.push("/" + tab.props.name);
  //菜单的默认激活

  // mainStore.activerindex = tab.props.name
  // // console.log(mainStore.activerindex)
  // console.log(mainStore.activerindex)
};

//头部tab点击移除按钮后的事件
const removetabs = (tab) => {

  // console.log(mainStore.cacheroute)
  //删除指定的缓存路由
  const cachindex = mainStore.cacheroute.indexOf(tab)
  mainStore.cacheroute.splice(cachindex, 1)
  //寻找headertabs里和当前点击的name一致的数据的下标
  const index = headertabs.value.findIndex((text) => text.name === tab);

  //删除点了叉叉的数据
  mainStore.headertabs.splice(index, 1);
  //如果是点了当前页面的叉叉，把默认激活也转移给数组最后一位数据
  if (tab == activetab.value) {
    mainStore.activetab = mainStore.headertabs.slice(-1)[0].name;
    router.push("/" + mainStore.activetab);
  }
};
</script>

<template>
  <el-container class="home-container">
    <!-- 左边区域 -->
    <transition name="el-fade-in-linear">
      <el-aside width="266px" v-show="showmenu">
        <el-row class="aside_row">
          <el-col :span="6" class="aside_col_left">
            <div class="img_logo">
              <img
                src="../assets/logo.png"
                style="width: 32px; height: 32px; margin-top: 15px; margin-left: 15px"
              />
            </div>

            <el-tabs type="card" tab-position="left" @tab-click="handleClick" v-model="activeName">
              <el-tab-pane v-for="(item, index) in menus.data" :name="item.menu_name">
                <template #label>
                  <div>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.menu_icon" />
                    </svg>

                    <span class="tabtext">{{ item.menu_name }}</span>
                  </div>
                </template>
                Route
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="18" class="aside_col_right">
            <div class="title">珠宝管理软件</div>
            <el-divider content-position="center">{{ toptitle }}</el-divider>
            <el-menu
              :router="true"
              ref="leftMenue"
              class="leftMenue"
              v-for="(item, index) in leftmenus"
              :key="item.menu_path"
              :default-active="activerindex"
              @select="selectmenu"
            >
              <el-menu-item :index="item.menu_path" v-if="!item.child">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.menu_icon" />
                </svg>
                <span>{{ item.menu_name }}</span>
              </el-menu-item>
              <el-sub-menu :index="item.menu_name" v-if="item.child">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>{{ item.menu_name }}</span>
                </template>
                <el-menu-item-group v-for="(item2, index) in item.child">
                  <el-menu-item :index="item2.menu_path">{{ item2.menu_name }}</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
    </transition>
    <el-container>
      <!-- 头部区域 -->
      <el-header height="110px">
        <el-row class="header_row_class">
          <el-col :span="1">
            <svg class="icon2" aria-hidden="true" @click="btnindent">
              <use :xlink:href="headerbtnicon" />
            </svg>
          </el-col>
          <el-col :span="3">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item v-for="(item, index) in breadcrumb">{{ item }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="2" :offset="18">
            <el-dropdown>
              <el-row style="cursor: pointer">
                <el-col :span="2">
                  <el-avatar :size="36" src="https://i.gtimg.cn/club/item/face/img/2/16022_100.gif"></el-avatar>
                </el-col>

                <el-col :span="2" :push="7" class="rightclass">
                  <span>admin</span>
                </el-col>
                <el-col :span="3" :push="12">
                  <svg class="icon3" aria-hidden="true">
                    <use xlink:href="#icon-31xiala" />
                  </svg>
                </el-col>
              </el-row>
              <template #dropdown>
                <el-dropdown-menu class="eldrop">
                  <el-dropdown-item>
                    <svg class="icon4" aria-hidden="true" @click="btnindent">
                      <use xlink:href="#icon-geren" />
                    </svg>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item @click="quitbtn">
                    <svg class="icon4" aria-hidden="true" @click="btnindent">
                      <use xlink:href="#icon-act_tuichu" />
                    </svg>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <div class="header_tabs">
          <el-tabs type="card" @tab-click="tabsclick" @tab-remove="removetabs" v-model="activetab">
            <el-tab-pane
              v-for="item in headertabs"
              :label="item.title"
              :name="item.name"
              :closable="item.close"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </el-header>
      <!-- 主区域 -->
      <el-main>
        <!--路由占位符 -->
        <router-view v-slot="{ Component }">
          <keep-alive :include="cacheroute">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
//头部右侧头像下拉框
.icon4 {
  width: 1.75vw;
  height: 1rem;
  /* vertical-align: -0.01em; */
  fill: currentColor;
  overflow: hidden;
  margin-left: -0.5vw;
}
/deep/ .header_tabs .el-tabs--card > .el-tabs__header .el-tabs__item {
  // border: 1px solid #dcdfe6;
  // background-color: #e8f4ff;
  border: none;
  padding: 0 30px 0 30px;
  margin-right: -18px;
  // color: #606266;
}
/deep/ .header_tabs .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
  margin-left: 1.2rem;
}

//头部tabs被点击后的样式
/deep/ .header_tabs .el-tabs__item.is-active {
  background-color: #e8f4ff;
  color: #1890ff;
  margin-bottom: 3px;
  -webkit-mask-box-image: url(../assets/mask.png);
  mask-image: url(../assets/mask.png);
}
//头部tabs未被点击后的样式
/deep/ .header_tabs .el-tabs__item {
  color: #515a6e;
  line-height: 2.7rem;
}
/deep/ .header_tabs .el-tabs__new-tab {
  display: none;
}
//头部tabs鼠标移动上去后的样式
/deep/
  .header_tabs
  .el-tabs--card
  > .el-tabs__header
  .el-tabs__item.is-closable:hover {
  background-color: rgb(222, 225, 230);
  -webkit-mask-box-image: url(../assets/mask.png);
  mask-image: url(../assets/mask.png);
  padding: 0 30px 0 30px;
}
.home-container {
  height: 100%;
}
.el-header {
  box-shadow: inset 1px 0px 2px 0px rgb(0 0 0 / 10%);
  line-height: 7ex;
  --el-header-padding: 0;
}
.el-aside {
}

.el-main {
  background-color: #f6f8f9;
  // margin: 1rem;
  box-shadow: inset 0px 0px 5px 0px rgb(0 0 0 / 10%);
}
.aside_row {
  height: 100%;
}
.aside_col_left {
  height: 100%;
  background-color: #282c34;
}
.aside_col_right {
  height: 100%;
  // border-right: 1px solid #dcdfe6;
  // box-shadow: 3px 1px 5px 0 rgb(0 0 0 / 10%);
}
.img_logo {
  width: 100%;
  height: 60px;
}
//字体颜色
/deep/.el-tabs--left.el-tabs--card .el-tabs__item.is-left {
  line-height: 41px;
  border: none;
  width: 54px;
  height: 54px;
  color: white;
  display: flex;
  justify-content: center;
  margin-left: 5px;
  margin-top: 7px;
}
// /deep/.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
//   background-color: red;
// }
//点击时的背景色
/deep/.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
  box-shadow: #282c34;
  background-color: #1890ff;
  border: 1px solid var(--el-border-color-base);
  border-color: #1890ff;
  border-radius: 8px;
}
//外边框
/deep/.el-tabs--left.el-tabs--card .el-tabs__nav {
  border: none;
}
//最下层边框
/deep/.el-tabs--card > .el-tabs__header {
  border: none;
}
.dd {
  background-color: black;
  height: 100%;
}
.cc {
  height: 100%;
}
.tabtext {
  margin-top: -13px;
  line-height: normal;
  display: block;
}
// /deep/.el-icon {
//   margin-left: 6px;
// }
.title {
  padding-left: 10px;
  margin-left: 34px !important;
  margin-bottom: 0.3rem;
  color: var(--el-color-black) !important;
  background: #fff !important;
  display: inline-block;
  margin-left: 5px;
  overflow: hidden;
  font-size: 20px;
  line-height: 55px;
  color: rgb(81, 90, 110) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/deep/.el-divider__text {
  color: rgb(81, 90, 110);
}
//分割线的样式
/deep/.el-divider--horizontal {
  margin: auto;
  margin-bottom: 1.3rem;
}
//菜单被点击后的样式
/deep/.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9) !important;
}
.icon2 {
  width: 1.1rem;
  height: 1.2rem;
  // vertical-align: -0.01em;
  fill: currentColor;
  overflow: hidden;
  cursor: pointer;
  margin-left: 1rem;
}
.icon3 {
  width: 0.7rem;
  height: 3.6rem;
  // vertical-align: -0.01em;
  fill: currentColor;
  overflow: hidden;
  cursor: pointer;
  margin-left: 1.1rem;
}
.el-breadcrumb {
  line-height: 3.7;
}
//头部下边框线
.header_row_class {
  border-bottom: 1px solid #f6f6f6;
  height: 3.8rem;
}
.el-avatar {
  margin-top: 0.5rem;
}
.rightclass {
  font-size: 14px;
  color: rgb(96, 98, 102);
  line-height: 3.5rem;
}
.righttile {
  margin-left: 7ex;
  line-height: 0ex;
}
.el-menu {
  border: none;
}
</style>
